<template>
  <!-- <div>api统一管理</div> -->
  <Panel title="安全评估能力" class="panel">
    <div class="df jcsb">
      <div>
         <el-menu
            default-active="4"
            class="el-menu-vertical-demo"
            background-color="#545c64"
          >
            <el-menu-item @click="rou1" index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">安全攻防测试</span>
            </el-menu-item>
            <el-menu-item @click="rou" index="3">
              <i class="el-icon-setting"></i>
              <span slot="title">漏洞扫描</span>
            </el-menu-item>
            <el-menu-item  index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">系统安全评估</span>
            </el-menu-item>
          </el-menu>
      </div>
      <div class='f1 rgmain'>
        <el-breadcrumb >
          <el-breadcrumb-item :to="{ path: '/interfaceStatistics/interfaceStatistics3' }"><span class="group">源代码审计</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/interfaceStatistics/interfaceStatistics4' }"><span class="group1">终端行为管理</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/interfaceStatistics/interfaceStatistics5' }"><span class="group1">终端行为管理报告</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/interfaceStatistics/interfaceStatistics6' }"><span class="group1">安全基线核查</span></el-breadcrumb-item>
        </el-breadcrumb>
        <!--查询 -->
        <el-form inline :model="searchData" class="searchDataForm">
          <el-form-item label="任务名称">
            <el-input size="mini" v-model="searchData.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select size="mini" v-model="searchData.aaa">
              <el-option label="进行中" value="shanghai"></el-option>
              <el-option label="完成" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input size="mini" v-model="searchData.ccc"></el-input>
          </el-form-item>
          <!-- 选择时间 -->
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchData.date"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
            ></el-date-picker>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" size="mini" @click="search123">查询</el-button>
            <el-button type="info" size="mini" @click="reset123">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 新建分组 -->
        <div class="newAPI df jcc aic" @click="newAPI">+新建任务</div>
         <el-table class="tatle" :header-cell-style="{background: '#EBF2F9'}"  :data="tableData" stripe ref="table">         
          <!-- api名称 -->
          <el-table-column prop="name" label="任务名称" width="300" >     
          </el-table-column>  
          <!-- 请求方式   -->
          <el-table-column  prop="create" label="创建人" width="300" column-key="create">    
          </el-table-column>  
          <!-- 创建时间   -->
          <el-table-column prop="create_time"  label="任务状态" width="300" column-key="create_time">    
          </el-table-column>
          <el-table-column prop="ip"  label="代码位置路径" width="300" column-key="ip">    
          </el-table-column>
          <el-table-column prop="time"  label="创建时间" width="300" column-key="time">    
          </el-table-column>
          <el-table-column prop="num"  label="进度" width="300" column-key="num">    
          </el-table-column>
          <!-- 描述 -->
          <el-table-column prop="remark"  label="描述信息" width="200" column-key="remark">    
          </el-table-column>
          <!--  操作  -->
          <el-table-column fixed="right" label="操作" width="260">
            <template slot-scope="scope" >
              <div class="df">
                  <el-button size="mini"  type="text" @click="handlechakan(scope.row)" >配置</el-button>
                  <el-button size="mini" :disabled="scope.row.num!='100%'" type="text">查看</el-button>
                  <el-button size="mini"  type="text" @click="handlejieguo(scope.row)">结果</el-button>
                  <el-button size="mini"  type="text" @click="handleDelete(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column> 
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[3, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
    </el-pagination>
      </div>
        
    </div>
     <!-- 编辑弹出框 -->
    <el-dialog title="查看规则" :visible.sync="dialogTableVisible1">
      <el-form label-position="right" :model="editData">
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="editData.create " autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务状态" :label-width="formLabelWidth">
          <el-input v-model="editData.create_time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="代码路径" :label-width="formLabelWidth">
          <el-input v-model="editData.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="editData.remark " autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
     <!-- 结果弹出框 -->
    <el-dialog title="代码路径" :visible.sync="dialogTableVisible3">
        <div class="df jcc aic">
          <img src="../../assets/imgs/789.jpg" alt="">
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible3 = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新建分组弹框 -->
    <el-dialog title="新建安全攻防演练任务" :visible.sync="dialogTableVisible2" width="40%">
      <el-form :rules="rules" ref="RuleForm" status-icon label-position="right" :model="api_group_info" >
        <el-form-item   label="任务名" :label-width="formLabelWidth" >
          <el-input class="ggg" v-model="api_group_info.aaa" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item   label="代码路径" :label-width="formLabelWidth" >
          <el-input class="ggg" v-model="api_group_info.bbb" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item   label="设置执行的时间" :label-width="formLabelWidth" >
          <el-input class="ggg" v-model="api_group_info.ccc" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item   label="描述" :label-width="formLabelWidth" prop="remark "  >
          <el-input type="textarea" class="ggg" v-model="api_group_info.remark " autocomplete="off" placeholder="请输入分组描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false" >取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </Panel>
</template>

<script>
// 引入panel
import Panel from "@/components/panel/Panel";
// 引入正则
import { GROUP_REG , PHONE_REG } from "@/utils/reg";
export default {
  components: {
    Panel,
  },
  data() {
    //验证api名称
    let checkName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入分组名称"));
      } else if (!GROUP_REG.test(value)) {
        //正则验证
        callback(
          new Error("输入长度在10个之内,只能包含字母、数字和汉字")
        )
       } else {
        callback();
      }
    };
    return {
      createTime:[new Date(),new Date()],
      //创建时间
       pickerOptions: {
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },
            {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      //搜索
      // 搜索框
      searchData: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        eee: '',
        date: []
      },
      options: [{
          value: '选项1',
          label: '对象1'
        }, {
          value: '选项2',
          label: '对象2'
        }, {
          value: '选项3',
          label: '对象3'
        }],
        options1: [{
          value: '选项1',
          label: '分级1'
        }, {
          value: '选项2',
          label: '分级2'
        }, {
          value: '选项3',
          label: '分级3'
        }],
      search:"",
      // value: "",
       //输入框
      formLabelWidth: "120px",
      value2:true,
      // 编辑弹出框
      dialogTableVisible1:false,
      // 新建分组弹框
      dialogTableVisible2:false,
      dialogTableVisible3:false,
      innerVisibleProvider:false,
      currentPage: 1, //表示当前显示的页码
      pageSize: 5, //每一页显示的条数
      total: 150, //总条数
      apigroup:[],//分组
      rules: {
          name:{required: true,validator: checkName, trigger: "blur"},  
        },
     
      tableData: [
        {
          name:"456",
          create_time: "进行中",
          create: 'admin',
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          num: '80%',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "进行中",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '嘟嘟',
          num: '89%',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "完成",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '陈晓',
          num: '100%',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "完成",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '小明',
          num: '100%',
          time: '2022-11-24',
          remark: '1111111'
        },
      ],
       // 编辑弹框数据
      editData: {
        id:"",
        name:"",
        create_time:"",
        create:"",
        num:'',
        ip:'',
        remark :"",
      },
      // 新建API弹框数据
      newAPIData:{
          api_name:"",
          method: "",
          api_type: "",
          api_group_id: "",
          create_time: "",
          modify_time:"",
          service_provider: "",
          creator: "",
          url:"",
          secret_id:"",
          secret_key:"",
          describe:"",
          auth_params_info:"",
          app_name:"",
          historical_call:"",
          api_status:"",
          average_duration:"",
          success_rate:"",
          failure_rate:"",
          param_key:"",
          param_value:"",
          forward:"是",

      },
      // 新建分组
      api_group_info:{
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        remark :"",
      },
    };
    
  },
  methods: {
    rou(){
        this.$router.push(
          {
            path:'/interfaceStatistics/interfaceStatistics2'
          }
        )
    },
    rou1(){
        this.$router.push(
          {
            path:'/interfaceStatistics/interfaceStatistics'
          }
        )
    },
    //查询
    search123() {
      this.tableData = [{
          name:"456",
          create_time: "进行中",
          create: 'admin',
          ip:'123456789',
          num: '80%',
          time: '2022-11-24',
          remark: '1111111'
        }]
    },
    //重置
    reset123() {
      this.searchData = {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: []
      };
      this.tableData = [
        {
          name:"456",
          create_time: "进行中",
          create: 'admin',
          ip:'123456789',
          num: '80%',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "进行中",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '嘟嘟',
          num: '89%',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "完成",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '陈晓',
          num: '100%',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "完成",
          ip:'E:/lolusa/count/installp/sdfjo/asdf/adf/nioc/llkj/hoos.',
          create: '小明',
          num: '100%',
          time: '2022-11-24',
          remark: '1111111'
        },
      ]
    },
     //改变时间
    timeChange(){
      console.log(this.createTime)
      let startTime = this.createTime[0]+' 00:00:00'
      let endTime = this.createTime[1]+' 23:59:59'

    },
    ruwry(){
      console.log(this.newAPIData.api_type);
    },
    // getClientWidth(){
    //   console.log(this.$refs.tables.offsetWidth)
    //   console.log(this.$refs.propsModel.offsetWidth)
    //   this.$refs.propsModel.style.width=this.$refs.tables.offsetWidth+'px'
    // },
    // 新建分组
    newAPI(){
      this.dialogTableVisible2 = true;
    },
    // 新建分组-添加
    submitForm(){
      this.$refs.RuleForm.validate(async (valid) => {
        if (valid) {
          // let res = await addAccount(this.AddRuleForm);

          // //判定 注册成功后,进行跳转到指定页面
          // if (res.code == 0) {
          //   this.$router.push("/account/account-list");
          // }
        } else {
          //不通过
          this.$message.error("添加失败");
        }
      });
    },
     // 删除
    handleDelete(id) {
      this.$confirm("确定删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     // 查看
    handlechakan(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
    handlejieguo(){
      this.dialogTableVisible3 = true;
    },
     // 编辑
    handleEdit(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
    // 编辑-保存修改
    saveEdit() {
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });          
        });
    },
    savetoConfigure(){
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '已完成API配置，下一步请提交审核!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });          
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getCateData();
    },
  },
   mounted() {
  },
};
</script>

<style  scoped>
.header{
  margin-bottom: 8px;
}
/* 创建时间 */
.demonstration{
  margin-right: 10px;
}
.block{
  margin-right: 8px;
}
/* 操作按钮 */
.caozuo{
  width: 30px;
  text-align: center;
  border-radius: 50%;
}

.el-table /deep/.caret-wrapper,.el-table /deep/.el-table__column-filter-trigger{opacity :0;}
.el-table:hover /deep/.caret-wrapper,.el-table:hover /deep/.el-table__column-filter-trigger{opacity:1;}
.el-icon-search{opacity: 0;}
.el-table:hover .el-icon-search{opacity: 1;}
.newAPI{
  width: 114px;
  height: 34px;
  background: #33BDFC;
  border: 1px solid rgba(51,189,252,1);
  border-radius: 3px;
  color: #fff;
  margin-bottom: 15px;
}
.el-dialog{
  width: 500px;
}
.ggg{
  width: 500px;
}
.el-input.is-disabled /deep/.el-input__inner {
  background-color: #fff !important;

}
.dynamic-header{
  position: absolute;
  height: 150px;
  top:198px;
  left: 20px;
  background-color: #fff;
  z-index: 3000;
  /* border: 1px solid red; */
  box-shadow:-5px 5px  8px 1px rgba(0, 0, 0, 0.2) ;

}
/* 表格 */
.tatle{
  margin-bottom: 50px;
}
/* 弹框 */
.el-dialog__wrapper /deep/.el-dialog__header{
   /* background-color: antiquewhite; */
   /* padding: 0 10px; */
   margin: 0 30px;
   border-bottom: 1px solid #E5E5E5;
  }
  .el-dialog{
    position: relative;
  }
  .el-dialog__wrapper /deep/.el-dialog__header::before{
    position: absolute;
    left: 30px;
    top: 23px;
    content: "";
    display: block;
    clear: both;
    width: 2px;
    height: 18px;
    background-color: rgb(34, 180, 216);
}
.caller{
  margin-top: 15px;
  width: 100%;
}
.rgmain{
  width: 75%;
  padding-left: 15px;
}
.group{
  color: black;
  font-weight: 700;
}
.group1{
  color: black;
  font-weight: 400;
}
.el-menu-vertical-demo{
  height: 100%;
}
.searchDataForm{
  margin-top: 15px;
}
</style>
